<template>
  <Panel>
    <template #header> <span>店铺管理</span> </template>
    <template #con>
      <div>
        <el-form ref="form" :model="shopForm" label-width="80px" size="mini">
          <el-form-item label="店铺名称">
            <el-input v-model="shopForm.name"></el-input>
          </el-form-item>
          <el-form-item label="店铺公告">
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="shopForm.bulletin"
            >
            </el-input>
          </el-form-item>
          <!-- 店铺头像 -->
          <el-form-item label="店铺头像">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:5000/shop/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!-- 店铺图片 -->
          <el-form-item label="店铺图片">
            <el-upload
              action="http://127.0.0.1:5000/shop/upload"
              list-type="picture-card"
              :on-success="handleShopSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="配送费">
            <el-input v-model="shopForm.deliveryPrice"></el-input>
          </el-form-item>
          <el-form-item label="配送时间">
            <el-input v-model="shopForm.deliveryTime"></el-input>
          </el-form-item>
          <el-form-item label="配送描述">
            <el-input v-model="shopForm.description"></el-input>
          </el-form-item>
          <el-form-item label="店铺评分">
            <el-input v-model="shopForm.score"></el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input v-model="shopForm.sellCount"></el-input>
          </el-form-item>
          <el-form-item label="活动">
            <el-checkbox-group v-model="shopForm.supports">
              <el-checkbox label="在线支付满28减5"></el-checkbox>
              <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
              <el-checkbox label="单人精彩套餐"></el-checkbox>
              <el-checkbox label="特价饮品8折抢购"></el-checkbox>
              <el-checkbox label="单人特色套餐"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="营业时间">
            <el-time-picker
              is-range
              v-model="shopForm.date"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </Panel>
</template>
<script>
import { getShop, editShop } from "../../api/shop.js";

export default {
  data() {
    return {
      shopForm: {
        supports: [],
      },
      imageUrl: "",
      dialogImageUrl: "",
      fileList: [],
      dialogVisible: false,
      baseUrl: "http://127.0.0.1:5000/upload/shop/",
    };
  },
  created() {
    this.getShopInfo();
  },
  methods: {
    async getShopInfo() {
      const { data } = await getShop();
      // 把数据渲染到界面 --头像
      this.imageUrl = this.baseUrl + data.avatar;
      // 把数据渲染到界面 --店铺图片  循环
      data.pics.forEach((item) => {
        this.fileList.push({ name: item, url: this.baseUrl + item });
      });
      this.shopForm = data;
    },
    async onSubmit() {
      this.shopForm.pics = JSON.stringify(this.shopForm.pics);
      this.shopForm.supports = JSON.stringify(this.shopForm.supports);
      this.shopForm.date = JSON.stringify(this.shopForm.date);
      const data = await editShop(this.shopForm);
      if (data.code === 0) {
        location.reload();
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleShopSuccess(res, file) {
      // 成功之后保存返回的图片
      this.shopForm.pics.push(res.imgUrl);
      console.log(this.shopForm.pics);
    },
    handleRemove(file, fileList) {
      const i = this.shopForm.pics.findIndex((item) => {
        file.name === item;
      });
      this.shopForm.pics.splice(i, 1);
      // 删除本地数组中的数据
      // const i = this.goodsForm.imgUrl.findIndex(item => item === file.name)
      // this.goodsForm.imgUrl.splice(i, 1)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 把上传成功的地址，存到了本地的data中
      this.shopForm.avatar = res.imgUrl;
    },
    beforeAvatarUpload(file) {
      const arr = ["image/jpeg", "image/jpg", "image/webp", "image/gif"];
      const isJPG = arr.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("头像图片不符合格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>